Impressum
Impressum
Typographie gestalten und strukturieren
Hilfreiche Einschätzung der Schwierigkeit
Wie relevant und hilfreich ist es?
Wie schwer ist es anzuwenden?
Hypertext Markup Language (HTML) ist die Grundlage jeder Webseite. Sie wird verwendet, um den Inhalt und die Struktur einer Webseite zu definieren. Dabei wird angegeben, welche Elemente auf einer Seite erscheinen sollen, wie z.B. Texte, Bilder, Links und vieles mehr.
HTML ist entscheidend für die Strukturierung und Darstellung von Inhalten auf Webseiten. Die Struktur und Hierarchie der HTML-Tags sind nicht nur für die visuelle Darstellung wichtig, sondern auch für die Semantik des Inhalts. Diese klare Struktur der HTML-Tags steigert die Zugänglichkeit, da Menschen mit Behinderungen, etwa durch den Einsatz von Screenreadern, den Inhalt besser erfassen und navigieren können.
/* Ein Beispiel eines HTML Codes */
<!DOCTYPE html>
<html>
<body>
<h1>Hello World!</h1>
<p>My first paragraph.</p>
</body>
</html>
Um verschiedene Arten von Inhalten zu kennzeichnen, wird in HTML eine Reihe von Tags (Elemente) verwendet. Hier sind ein paar der relevanten Tags für Typographie:
Die Überschrift-Tags ( h1 ), welche durch unterschiedliche Ebenen dargestellt werden. Hier kann man von h1 bis h6 unterscheiden, wobei h1 die wichtigste und
größte Überschrift ist und h6 die am wenigsten wichtige und kleinste ist.
Der Absatz Tag ( p ), welcher für die Gliederung von Texten in Absätzen verwendet wird.
Der Bold Tag ( b ), welcher als visuelle Hervorhebung verwendet wird um den Text fett darzustellen.
Der Italic Tag ( i ), welcher verwendet wird um Text kursiv darzustellen.
Text in HTML kann selbstverständlich durch Variablen verändert und angepasst werden. Es wird jedoch empfohlen, dafür CSS zu verwenden. Weitere Informationen zur Textgestaltung und CSS finden sich im Abschnitt CSS.
/* Ein Beispiel der Elemente von HTML */
<h1>Title with biggest text</h1>
<h6>Title with smallest text</h6>
<p>Paragraph</p>
<p><b>Bold Paragraph</b></p>
<p><i>Italic Paragraph</i></p>
/* Ein Beispiel von Textgestaltung in HTML */
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
Semantisches HTML bedeutet, HTML-Elemente so zu verwenden, dass sie die Struktur und den Inhalt einer Webseite logisch und klar darstellen. Die Wahl passender HTML-Elemente verbessert nicht nur die Lesbarkeit, sondern macht den Inhalt auch verständlicher. Davon profitieren sowohl Menschen als auch Maschinen wie Suchmaschinen und unterstützende Technologien.
Eine semantische Strukturierung ist besonders hilfreich für die typografische Lesbarkeit und Zugänglichkeit. Sie sorgt dafür, dass Inhalte sinnvoll und übersichtlich präsentiert werden und Leser intuitiv durch den Text geführt werden. Beispielsweise hilft die korrekte Verwendung von Überschriften (h1 bis h6) dabei, eine klare visuelle Hierarchie zu schaffen, die den Blick der Leser lenkt und ihnen das Verständnis der Themen erleichtert. Für Nutzer, die auf Screenreader oder andere Technologien angewiesen sind, werden semantische Elemente zu einer wichtigen Orientierungshilfe, da sie die Struktur und Bedeutung der Inhalte direkt vermitteln. Mehr dazu wird im Abschnitt „Accessibility“ erläutert.
Um selbst semantisches HTML zu schreiben, ist es wichtig, die Aufgabe des jeweiligen Textes zu definieren. Mithilfe der verschiedenen HTML-Elemente kann man dann thematische Gruppierungen für Absätze strukturieren und den Inhalt klar gliedern.
Auf dieser Webseite wurde HTML genutzt, um die grundlegende Struktur und den Textinhalt zu gestalten. Dabei kamen hauptsächlich die h1 bis h6 Tags für Überschriften und p Tags für Absätze zum Einsatz, während alle visuellen Anpassungen über CSS vorgenommen wurden. Für die Darstellung von Code-Snippets wurde der pre Tag verwendet, um vorformatierten Text anzuzeigen. Zudem kam der code Tag zum Einsatz, um mithilfe von HighlightJS Code-Snippets visuell vom restlichen Text abzuheben.
/* Ein Auschnitt aus der HTML dieser Webseite*/
<div class="info-point">
<h4>HTML auf dieser Webseite?</h4>
<p>
Auf dieser Webseite wurde HTML genutzt, um die
grundlegende Struktur und den Textinhalt zu gestalten.
Dabei kamen...
</p>
</div>
/* Ein Auschnitt aus der HTML dieser Webseite*/
<div class="title-info">
<div class="title-info-inner">
<h1>HTML</h1>
<p>Typographie gestalten und strukturieren</p>
</div>
</div>
<div class="title-image">
<img src="../assets/img/valery-sysoev-p9OkL4yW3C8-unsplash.jpg" alt="HTML">
</div>
Verwende die passenden Tags für unterschiedliche Textarten, um die Textgestaltung zu erleichtern und die Zugänglichkeit zu verbessern. Dadurch können Screenreader den Inhalt korrekt interpretieren und verstehen.
Achte auf die Sprache deiner Webseite, indem du das lang-Attribut im HTML entsprechend anpasst. Dadurch können Screenreader die richtige Sprache des Inhalts erkennen und korrekt wiedergeben.
Auch wenn HTML die Möglichkeit bietet, Texte zu gestalten, solltest du dennoch CSS in separaten Dateien verwenden. Dies sorgt für eine bessere Übersichtlichkeit und erleichtert die Wartung deines Codes.
Nutze einen HTML-Validator wie den W3C Markup Validation Service, um sicherzustellen, dass dein HTML-Code den Standards entspricht. Dies hilft, Syntaxfehler zu vermeiden und stellt sicher, dass deine Seite korrekt gerendert wird.